<template>
  <el-card class="box-card" style="width: 1180px">
    <div class="search">
      <el-row gutter="20">
        <el-col :span="6">
          <el-input
            size="medium"
            placeholder="请输入巡检员名"
            v-model="query.insNickname"
          >
          </el-input>
        </el-col>

        <el-col :span="6">
          <el-input size="medium" placeholder="请输入地区" v-model="query.tr">
          </el-input>
        </el-col>

        <el-col :span="2">
          <el-button type="primary" size="medium" @click="loadSectionMessage()"
            >查询</el-button
          >
        </el-col>

        <el-col :span="8">
          <el-button type="info" size="medium" @click="reset()">重置</el-button>
        </el-col>
        <el-col :span="1">
          <el-button type="info" size="medium" @click="dialog.addshow = true"
            >添加路段</el-button
          >
        </el-col>
      </el-row>
    </div>

    <!--表格-->
    <el-table :data="sectionMessageList" stripe style="width: 100%">
      <!--隐藏列，路段id-->
      <el-table-column prop="secId" label="路段id" v-if="false"> </el-table-column>
      <el-table-column prop="secName" label="路段名称"> </el-table-column>
      <el-table-column prop="tr" label="所属地区"> </el-table-column>
      
      <el-table-column prop="insNickname" label="巡检员"> </el-table-column>
      <el-table-column prop="secSpaceCount" label="泊位数量"> </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="priamry"
            @click="handleEdit(scope.row.secId)"
            >编辑</el-button
          >
          <el-button size="mini" type="priamry" @click="pushBoweiManage()"
            >泊位管理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pageIndex"
      :page-sizes="pageInfo.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>

    <!--	添加-->
    <el-dialog title="新增路段" :visible.sync="dialog.addshow" width="30%">
      <el-form ref="addForm" :model="addForm" label-width="80px" prop="did">
        <el-row>
          <el-col :span="24">
           

            <el-form-item label="管理员" prop="insId">
              <el-select v-model="addForm.insId" style="width: 100%">
                <el-option
                  v-for="item in insList"
                  :key="item.insId"
                  :label="item.insNickname"
                  :value="item.insId"
                >
                </el-option>
              </el-select>
            </el-form-item>

            
            <el-form-item label="路段名称" prop="secName">
              <el-input v-model="addForm.secName"></el-input>
            </el-form-item>

            <el-form-item label="所属地区" prop="tr">
              <el-input v-model="addForm.tr"></el-input>
            </el-form-item>


            <el-form-item label="泊位数量" prop="secSpaceCount">
              <el-input v-model="addForm.secSpaceCount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.addshow = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </span>
    </el-dialog>

    <!--	修改-->
    <el-dialog
      title="编辑管理员信息"
      :visible.sync="dialog.updateshow"
      width="30%"
    >
      <el-form ref="updateForm" :model="updateForm" label-width="80px">
        <el-row>
          <el-col :span="24">
              <el-form-item label="路段名称" prop="secName">
              <el-input v-model="updateForm.secName"></el-input>
            </el-form-item>

            <el-form-item label="所属地区" prop="reservedVar">
              <el-input v-model="updateForm.reservedVar"></el-input>
            </el-form-item>


            <el-form-item label="泊位数量" prop="secSpaceCount">
              <el-input v-model="updateForm.secSpaceCount"></el-input>
            </el-form-item>

            <el-form-item label="管理员" prop="insId">
              <el-select v-model="updateForm.insId" style="width: 100%">
                <el-option
                  v-for="item in insList"
                  :key="item.insId"
                  :label="item.insNickname"
                  :value="item.insId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateshow = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: "Admin",
  data() {
    return {
      sectionMessageList: [],
      pageInfo: {
        pageSizes: [5, 10, 20, 50],
        total: "",
        pages: "",
      },
      //封装的请求参数
      query: {
        pageIndex: 1,
        pageSize: 5,
        insNickname: "",
        tr: "",
      },

      addForm: {},
      updateForm: {},
      insList: {},
      dialog: {
        addshow: false,
        updateshow: false,
      },
    };
  },
  methods: {
    //泊位管理。跳转到泊位管理
    pushBoweiManage() {
      this.$router.push("/home/berth");
    },

    //重置按钮
    reset() {
      (this.query.insNickname = ""),
        (this.query.tr = ""),
        this.loadSectionMessage();
    },

    //当每页显示条数改变时
    handleSizeChange(size) {
      this.query.pageSize = size;
      this.loadSectionMessage();
    },
    //当页数改变时
    handleCurrentChange(currentPage) {
      this.query.pageIndex = currentPage;
      this.loadSectionMessage();
    },
    loadSectionMessage() {
      this.$axios
        .post("adminSection/queryAllSectionMessage", this.query)
        .then((res) => {
          this.sectionMessageList = res.data.data.list;
          this.pageInfo.pages = res.data.data.pages;
          this.pageInfo.total = res.data.data.total;
        });
    },
    loadIns() {
      this.$axios
        .get("adminSection/queryAllIns")
        .then((res) => {
          this.insList = res.data.data;
        })
        .catch((error) => {
          this.$message.error("出错了，请稍后重试");
        });
    },
    save() {
      this.$axios
        .post("adminSection/addSection", this.addForm)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("添加成功");
            this.dialog.addshow = false;
            this.loadSectionMessage();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((error) => {
          this.$message.error("出错了！请稍后重试");
        })
        .then(() => {
          //注意要指定prop="did"属性才能起作用
          this.$refs.addForm.resetFields();
        });
    },
    handleEdit(id) {
      this.$axios.get("adminSection/selInsById/" + id).then((res) => {
        this.updateForm = res.data.data;
      });
      this.dialog.updateshow = true;
    },
    update() {
      this.$axios
        .put("adminSection/updateSection", this.updateForm)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("修改成功");
            this.dialog.updateshow = false;
            this.loadSectionMessage();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((error) => {
          this.$message.error("出错了！请稍后重试");
        })
        .then(() => {
          this.$refs.updateForm.resetFields();
        });
    },
    handleDelete(id) {
      this.$axios
        .delete("adminSection/delete/" + id)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success("删除成功");
            this.loadSectionMessage();
          } else {
            this.$message.info("删除失败");
          }
        })
        .catch((error) => {
          this.$message.error("出错了！请稍后重试");
        });
    },
  },
  mounted() {
    this.loadSectionMessage();
    this.loadIns();
  },
};
</script>

<style>
.uoloadSty .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.disUoloadSty .el-upload--picture-card {
  display: none; /* 上传按钮隐藏 */
}
.picture {
  width: 60px;
  height: 60px;
  border: 0px;
}
.disabled .el-upload--picture-card {
  display: none; /* 上传按钮隐藏 */
}
</style>